<template>
  <view class="commission-page">
    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-card">
        <view class="stats-item">
          <text class="stats-value">{{ formatPrice(totalCommission) }}</text>
          <text class="stats-label">累计佣金</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ formatPrice(availableAmount) }}</text>
          <text class="stats-label">可提现金额</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ formatPrice(withdrawnAmount) }}</text>
          <text class="stats-label">已提现金额</text>
        </view>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          :class="{ active: currentType === 'all' }"
          @click="switchType('all')"
        >
          全部
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentType === 'income' }"
          @click="switchType('income')"
        >
          收入
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentType === 'withdraw' }"
          @click="switchType('withdraw')"
        >
          提现
        </view>
      </view>
    </view>

    <!-- 佣金记录列表 -->
    <view class="commission-list">
      <view 
        class="commission-item" 
        v-for="(item, index) in commissionList" 
        :key="index"
      >
        <view class="commission-info">
          <view class="commission-title">{{ item.title }}</view>
          <view class="commission-desc">{{ item.desc }}</view>
          <view class="commission-time">{{ formatDate(item.create_time) }}</view>
        </view>
        <view class="commission-amount">
          <text class="amount-text" :class="item.type === 'income' ? 'income' : 'expense'">
            {{ item.type === 'income' ? '+' : '-' }}¥{{ formatPrice(item.amount) }}
          </text>
          <view class="commission-status" v-if="item.status">
            <text class="status-text" :class="item.status === 'pending' ? 'status-pending' : (item.status === 'processing' ? 'status-processing' : (item.status === 'success' ? 'status-success' : (item.status === 'failed' ? 'status-failed' : 'status-default')))">{{ getStatusText(item.status) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && commissionList.length === 0">
      <text class="empty-text">暂无佣金记录</text>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !loading">
      <text class="load-more-text" @click="loadMore">加载更多</text>
    </view>

    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
/**
 * 佣金明细页面
 * @author 王勇程 <laughskydragon@qq.com>
 */
import { getCommissionList } from '@/api/invite'
import { formatPrice, formatDate } from '@/utils/common'

export default {
  data() {
    return {
      totalCommission: 0,
      availableAmount: 0,
      withdrawnAmount: 0,
      currentType: 'all',
      commissionList: [],
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 20
    }
  },

  onLoad() {
    this.loadCommissionData()
  },

  onPullDownRefresh() {
    this.refreshData()
  },

  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },

  methods: {


    // 加载佣金数据
    async loadCommissionData() {
      this.loading = true
      
      try {
        const res = await getCommissionList({
          type: this.currentType,
          page: this.page
        })
        
          const data = res || {}

          this.totalCommission = data.stats?.total_commission || 0
          this.availableAmount = data.stats?.available_amount || 0
          this.withdrawnAmount = data.stats?.withdrawn_amount || 0

          const pageList = data.list || data.data || []
          if (this.page === 1) {
            this.commissionList = pageList
          } else {
            this.commissionList = [...this.commissionList, ...pageList]
          }

          this.hasMore = typeof data.has_more !== 'undefined'
            ? !!data.has_more
            : ((data.current_page || 1) < (data.last_page || 1))
        
      } catch (error) {
        console.error('加载佣金数据失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },

    // 切换类型
    switchType(type) {
      if (this.currentType === type) return
      
      this.currentType = type
      this.page = 1
      this.hasMore = true
      this.loadCommissionData()
    },

    // 刷新数据
    refreshData() {
      this.page = 1
      this.hasMore = true
      this.loadCommissionData()
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.page++
        this.loadCommissionData()
      }
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '处理中',
        'success': '已完成',
        'failed': '失败'
      }
      return statusMap[status] || status
    },

    // 格式化价格
    formatPrice(price) {
      return formatPrice(price)
    },

    // 格式化日期
    formatDate(date) {
      return formatDate(date, 'MM-DD HH:mm')
    },

    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        'pending': 'status-pending',
        'processing': 'status-processing',
        'success': 'status-success',
        'failed': 'status-failed'
      }
      return classMap[status] || 'status-default'
    }
  }
}
</script>

<style scoped>
.commission-page {
  background-color: #F5F5F5;
  min-height: 100vh;
}



/* 统计卡片 */
.stats-section {
  padding: 30rpx;
}

.stats-card {
  background-color: #FFF;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stats-item {
  text-align: center;
}

.stats-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #FF4444;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #999;
}

/* 筛选栏 */
.filter-section {
  background-color: #FFF;
  margin: 0 30rpx 30rpx;
  border-radius: 16rpx;
  padding: 20rpx;
}

.filter-tabs {
  display: flex;
  justify-content: space-around;
}

.filter-tab {
  padding: 16rpx 32rpx;
  border-radius: 24rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #F5F5F5;
  text-align: center;
  flex: 1;
  margin: 0 10rpx;
}

.filter-tab.active {
  background-color: #FF4444;
  color: #FFF;
}

/* 佣金记录列表 */
.commission-list {
  padding: 0 30rpx;
}

.commission-item {
  background-color: #FFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.commission-info {
  flex: 1;
  margin-right: 20rpx;
}

.commission-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.commission-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.commission-time {
  font-size: 22rpx;
  color: #999;
}

.commission-amount {
  text-align: right;
}

.amount-text {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.amount-text.income {
  color: #00AA00;
}

.amount-text.expense {
  color: #FF0000;
}

.commission-status {
  
}

.status-text {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  background-color: #F5F5F5;
  color: #666;
}

.status-text.pending {
  background-color: #FFF3CD;
  color: #856404;
}

.status-text.success {
  background-color: #D4EDDA;
  color: #155724;
}

.status-text.failed {
  background-color: #F8D7DA;
  color: #721C24;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 30rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 30rpx;
}

.load-more-text {
  font-size: 28rpx;
  color: #FF4444;
  padding: 20rpx 40rpx;
  border: 1rpx solid #FF4444;
  border-radius: 24rpx;
}

/* 加载中 */
.loading {
  text-align: center;
  padding: 30rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}
</style>
